// pages/shop-list/shop-list.js
import { hideLoading, showLoading } from "@/utils/util"

// map地图实例
let mpContext;

Page({

  data: {
    showMap: true, // 是否显示地图
    longitude: 0,  // 经度 -180~180, 
    latitude: 0, // 纬度-90~90
    scale: 13, // 缩放级别，取值范围为3-20, 默认16
    markers: [], // 门店标记点
    hasUserLocation: true, // 是否有权限获取当前位置
    activeTabName: 'near', // 当前的标签 near附近门店，collect收藏门店
    tabsTop: 100, // 标签到顶部的距离
  },

  async onLoad() {
    // map组件实例, 参数为map组件上的id值，注意：不要加#在前面
    mpContext = wx.createMapContext('shop-map')
    // console.log('mpContext', mpContext)
    
    // 获取标签到顶部距离：用于子组件指定滚动高度
    this.queryTabsSelector()

    // 获取当前用户位置坐标
    await this.initUserLocation()
    // 查询列表数据
    this.loadShopList()
      
  },

  // 切换显示隐藏地图
  toggleMap() {
    // this.queryTabsSelector后面不写括号()
    this.setData({showMap: !this.data.showMap}, this.queryTabsSelector)
  },

  /**
   点击搜索框打开地图选择位置,
    参考：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html
    需要在app.json中指定如下配置才可：
          "requiredPrivateInfos": [
              "chooseLocation"
          ]
    */
  async openChooseLoaction() {
    try {
      // console.log('openChooseLoaction')
      // 打开地图选择位置
      const res = await wx.chooseLocation()
      console.log('chooseLocation', res)

      // longitude 经度 -180~180, latitude 纬度-90~90
      const {longitude, latitude} = res
      this.setData({longitude, latitude})
      // 查询门店列表
      this.loadShopList()
    } catch (error) {
      console.error('获取位置失败', error)
    }
  },



  /**
   * 获取当前用户位置坐标
   * 参考：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
   * 1. app.json 中声明 
   *    "requiredPrivateInfos": [
              "getLocation"
          ]
      2. 报错：{"errMsg":"getLocation:fail no permission, appId=wxe6d9223da077c472"}
          解决：在app.json中配置
            "permission": {
                  "scope.userLocation": {
                      "desc": "你的位置信息将用于小程序搜索附近门店使用"
                  }
              }
    */
  async initUserLocation() {
    try {
      showLoading()
      const res = await wx.getLocation({ type: 'gcj02'})
      const {longitude, latitude} = res
      // 获取用户当前位置坐标成功，更新到地图上
      this.setData({ longitude, latitude })
      console.log('initUserLocation', res)
    } catch (error) {
        console.error("获取用户当前位置失败", error)
        // 获取失败无权限：作一个无权限标识false, 展示【设置权限】按钮
        this.setData({ hasUserLocation: false })
    } finally {
        hideLoading()
    }
      
  },

  // 当设置权限页面后退时，会触发此事件，并传递最新的权限信息给此事件处理函数中
  openSettingCallback(e) {
    const { authSetting } = e.detail
    // 返回true用户已允许获取位置，反之不允许：无权限 
    const hasUserLocation = authSetting['scope.userLocation'] || false
    this.setData({ hasUserLocation })
    // console.log('openSettingCallback', hasUserLocation)
    // 允许获取位置，则重新调用获取当前位置逻辑
    if (hasUserLocation) {
      // this.initUserLocation()
      this.resetMapLocation()
    }
  },

  // 重置当前地图位置：
  async resetMapLocation() {
    // 获取当前用户位置
    await this.initUserLocation()
    // 重新查询列表数据（计算位置距离）
    this.loadShopList()
  },

  // 查询门店列表
  loadShopList() {
    // console.log('loadShopList')
    const {activeTabName} = this.data
    // 获取子组件实例
    const listComponent = this.selectComponent('#' + activeTabName)
    // 调用子组件的查询列表方法
    listComponent?.loadShopList()
  },

  // 切换标签
  changeTab(e) {
    // console.log('changeTab', e)
    const {name} = e.detail
    this.setData({ activeTabName: name })
    this.loadShopList()
  },

  // 更新地址的标记点 markers
  updateMapMarkers(e) {
    // console.log('updateMapMarkers', e)
    const { shopList } = e.detail 
    const markers = shopList.map((item, index) => {
      return {
        id: index, // 标记点id，点击标识点时会传递此id值
        longitude: item.location.coordinates[0],
        latitude: item.location.coordinates[1],
        iconPath: '/assets/images/location.png',
        width: '80rpx',
        height: '80rpx',
        callout: { // 气泡文字
          content: item.name + "\n" + item.address,
          borderRadius: 5,
          padding: 5,
          textAlign: 'center',
          bgColor: '#000000b3',
          color: '#fff',
            // 'BYCLICK':点击显示; 'ALWAYS':常显
          display: index === 0 ? 'ALWAYS': 'BYCLICK'
        }
      }
    })
    // console.log('markers', markers)
    this.setData({ markers, scale: 13 })

    // 将地图中心移动到第一个标记点
    setTimeout(() => {
      mpContext?.moveToLocation({
        longitude: shopList[0]?.location.coordinates[0],
        latitude: shopList[0]?.location.coordinates[1],
      })
    }, 300)
  },

  // 点击标记点进行触发此方法
  clickMarker(e) {
    // console.log('点击的标识点', e.detail.markerId)
    const {markerId} = e.detail
    // 点击第1个不处理 id=0, 
    // 点击非第1个标记, 且第1个是ALWAYS时，更新为 BYCLICK 点击显示
    if (markerId != 0 && this.data.markers[0].callout.display == 'ALWAYS') {
      this.setData({
        'markers[0].callout.display': 'BYCLICK'
      })
    }
  },

  // 获取标签到顶部的距离
  queryTabsSelector() {
    wx.createSelectorQuery()
      .select('#tabs-box')
      .boundingClientRect((res) => {
        //console.log('queryTabsSelector', res)
        this.setData({ tabsTop: res.top })
      })
      .exec() // 不要少了
  }
  
})